<template>
	<view class="page">
		<view class="searchbox">
			<view class="title" @click="tourl('/pages/home/citylist')">
				{{city.city || '选择城市'}} <image src="@/static/appointment/moredowm.png" mode="widthFix"></image>
			</view>
			 <view class="search">
			 	<image src="/static/home/icon_search.png" mode="widthFix"></image>
			 	<input type="text" placeholder="请输入关键词" @blur="search"  v-model="address">
			 </view>
		</view>
		<view class="" style="padding: 20rpx;">
			<view style="font-size: 28rpx;color: #999999;">当前定位</view>
			<view class="flex" style="justify-content: space-between;margin-top: 10rpx;">
				<text style="font-weight: bold;font-size: 28rpx;color: #333333;" @click="choseNow">{{nowCity.city}}</text>
				<view class="flex">
					 <u-icon slot="right" name="map-fill" color="#277EEF" size='20' @click="getNowCity"></u-icon>
					<text style="font-size: 28rpx;color: #277EEF;margin-left: 10rpx;">重新定位</text>
				</view>
			</view>
		</view>
		<view style="background-color: #F8F8F8;height: 30rpx;"></view>
		
		<view style="font-size: 28rpx;color: #999999;padding: 20rpx;">选择已有服务地址</view>
		<view class="adresslist">
		 
			<view class="list" v-for="(item,index) in adresslist" :key="index" @click="chose(item)">
			 	<view class="left">
			 		 <view class=""> {{item.areaAddress}}  {{item.detailAddress}} 
						<text v-if="item.is_default">默认</text>
					 </view>
			 		<text>{{item.name}} {{item.mobile}}</text>
			 	</view>
			 	 
			</view>
			 
			<no-data v-if="adresslist.length==0"></no-data>
			 
			 
		</view>
		
	</view>
</template>


<script>
import {cityListAPI,getcityAPI} from "@/api/home.js"
import {addressdeleteAPI,addresslistAPI} from "@/api/user.js"
import {mapState,mapActions,mapMutations } from "vuex";
	export default {
		data() {
			return {
				adresslist:[],
				address:"",
				nowLocation:{
					
				},
				nowCity:{
					
				}
			}
		},
		created() {
			this.getData()
			this.getNowCity()
		},
		computed:{
			...mapState("select", ['city'])
		},
		methods: {
			...mapMutations("select", ['SET_CITY',"SET_LOCTION"]),
			getNowCity(){
				let _this=this
				uni.showLoading()
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						_this.nowLocation=res
						getcityAPI({
							latitude:res.latitude,
							longitude:res.longitude,
						}).then(res=>{
							let city = res.data
							// console.log('city',city)
							_this.nowCity=city 
							uni.hideLoading()
						})
					},
					fail() {
						uni.hideLoading()
					}
				})
			},
			choseNow(){
				this.SET_CITY(this.nowCity)
				this.SET_LOCTION(this.nowLocation)
				 uni.switchTab({
					url:'/pages/home/home'
				 })
			},
			getData(){
				addresslistAPI({address:this.address}).then(res=>{
					this.adresslist=res.data
				})
			},
			chose(item){
				
				var data={ 
					cityId:item.cityCode,
					city:item.areaName.split(" ")[1]
				}
				this.SET_CITY(data)
				this.SET_LOCTION({
					latitude: item.latitude,
					longitude:item.longitude
				})
				uni.switchTab({
					url:'/pages/home/home'
				})
				console.log(data)
				// this.SET_CITY(data)
				// uni.navigateBack({
					
				// })
			},
			search(){
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scoped>
.pages{
	 
}
.searchbox{
	display: flex;
	align-items: center;
	padding: 20rpx;
	.title{
		font-size: 24rpx;
		color: #666;
		width: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 20rpx;
			height: 30rpx; 
		}
	}
	.search{
		border-radius: 30rpx; 
		flex: 1; 
		display: flex;
		align-items: center;
		background-color: #F5F6F9;
		border-radius: 40rpx;
		height: 60rpx;
		image{
			width: 30rpx;
			height: 30rpx;
			margin-left: 20rpx;
		}
		
		input{
			line-height: 60rpx;
			text-indent: 20rpx;
			flex: 1;
			font-size: 22rpx;
		}
	}
}

.adresslist{
	padding: 20rpx;
	.list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 10rpx; 
		border: 2rpx solid #EEEEEE;
		.left{
			flex: 1;
			line-height: 50rpx;
			view{
				font-weight: bold;
				font-size: 24rpx;
				text{
					color: #fff;
					background-color: $uni-color-primary;
					padding: 8rpx 26rpx;
					border-radius: 10rpx;
					margin-left: 10rpx;
				}
			}
			>text{
				color: #7C8191;
				font-size: 24rpx;
			}
		}
		 
	}
	
}

 
</style>
